<script setup lang="ts">
import {getuserlist} from "../../api/user.ts"
import {ref} from "vue"
// 导入修改用户状态的方法
import { editUserState} from "../../api/user.ts"
// 
import ShowMessage from "../../utils/ShowMessage.ts"

import ActionView  from "./ActionView.vue"

let users = ref([])

let kwd:string = ref('')  //搜索关键字
let pagenum:number = ref(1) //当前的页数
let pagesize:number = ref(5) //每页的条数

// 状态开关
const value1 = ref(true)  

// 封装函数获取用户列表
// 更新数据列表
let userlist = async ()=>{
    let data={
        query:kwd.value,//关键字
        pagenum:pagenum.value,//页码数
        pagesize:pagesize.value//每页的条数
    }
    let res = await getuserlist(data)
    console.log(res)//用户列表
    if(res.meta.status == 200){
        // 数据更新成功
        users.value = res.data.users

    }
}

userlist()

//1、修改用户状态
let  changState = async (id:number,type:boolean):void=>{
    // 发送请求  
    console.log(id,type)
    let res = await editUserState(id,type)
    console.log(res)
    if(res.meta.status == 200){
        // 状态修改成功
        ShowMessage(res.meta.msg,"success")
    }else{
        // 失败
        ShowMessage(res.meta.msg,"error")
    }
}






</script>



<template>
  <div>
      <el-table :data="users" style="width: 100%">
    <el-table-column prop="id" label="用户id" width="180" />
    <el-table-column prop="username" label="用户名" width="180" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column prop="mobile" label="电话" />
    <el-table-column prop="role_name" label="角色" />
    <el-table-column prop="mg_state" label="状态" >
        <!-- {row表示当前行数据} -->
        <template #default="{ row }">
            <!-- 开关 -->
        <el-switch v-model="row.mg_state"  @change="changState(row.id,row.mg_state)"></el-switch>
        </template>
        

    </el-table-column>
    <el-table-column prop="id" label="操作">

        <template #default=" {row} ">
        <!--  {row表示当前行数据} -->
        <ActionView :id="row.id"></ActionView>


        </template>


    </el-table-column>
  </el-table>
  </div>
</template>


